<template>
    <div>
      <div class="time-column">
        <div class="time-column-left">
          <span>{{ dmy }}</span
          >  <span>{{ weekday }}</span>
        </div>
        <div class="time-column-right">
          <span class="blue-circle"><img src="/sportal/entry/assets/images/user.png" alt=""></span> <span class="curser">
            <Login class="loginBtn" :loginPreBtnTheme="layoutStyleData.loginPreBtnTheme"
        />
          </span>
          <span class="blue-circle"><img src="/sportal/entry/assets/images/lock.png" alt=""></span><span class="curser"><a
            href="/seeyon/personalBind.do?method=retrievePassword"
            target="_blank"
            >忘记密码?</a
          ></span>
        </div>
      </div>
      <div class="logo-column">
          <div class="logo-title">
              国家标准验证点综合管理平台
          </div>
          <div class="serch-part">
             
              <div class="jianc">
                  <i>坚持系统规划 / 坚持改革创新 / 坚持开放融合 / 坚持注重实效 &nbsp;</i>
              </div>
          </div>
      </div>
    </div>
  </template>
  <script>
  import Login from '@/components/login';
  export default {
    props:{
        layoutStyleData: {
        type: Object,
        default: () => {
          return {};
        }
      },
    },
    components:{Login},
    data() {
      return {
        dmy: "", //年月日
        weekday: "", //星期几
      };
    },
    mounted() {
      this.getTime();
      window.addEventListener('resize', this.handleResize);
    },
    beforeUnmount() {
    // 移除resize事件监听器
    window.removeEventListener('resize', this.handleResize);
  },
    computed: {},
    methods: {
      handleResize() {
          console.log('屏幕缩放22 :>> ');
       if(document.body.clientWidth <= 1400){
        document.getElementsByClassName('logo-title')[0].style.fontSize = '27px';
        document.getElementsByClassName('jianc')[0].style.fontSize = '18px';
       }
       if(document.body.clientWidth <= 1100){
        document.getElementsByClassName('logo-title')[0].style.fontSize = '20px';
        document.getElementsByClassName('jianc')[0].style.fontSize = '15px';
       }
        
      },
      getTime() {
        // 创建一个Date对象
        var currentDate = new Date();
  
        // 获取年份
        var year = currentDate.getFullYear();
  
        // 获取月份（注意月份从0开始，需要加1）
        var month = currentDate.getMonth() + 1;
  
        // 获取日期
        var day = currentDate.getDate();
  
        // 获取星期几（注意星期日是0，星期一是1，以此类推）
        var weekday = currentDate.getDay();
  
        // 定义星期的数组
        var weekdays = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        this.weekday = weekdays[weekday];
        this.dmy = year + "年" + month + "月" + day + "日";
      },
    },
  };
  </script>
  <style>
 .time-column-right #loginPreBtnIframeDiv{
    display: inline-block;  
    vertical-align: top;
  }
  
  </style>
  <style scoped>

  .blue-circle{
      width: 30px;
      height: 30px;
      background-color: #005d86;
      display: inline-block;
      border-radius: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 18px;
      margin-left: 20px;
      margin-right: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .blue-circle img{
    width: 18px;
    height: 17px;
    vertical-align: middle;
  }
  .curser{
      cursor: pointer;
  }
  .time-column {
    width: 100%;
    padding: 2px 200px;
    box-sizing: border-box;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f3f3f3;
  }
  
  .time-column-right{
      font-size: 13px !important;
       display: flex;
      justify-content: center;
      align-items: center; 
  }
  .logo-column{
      display: flex;
      justify-content: center;
      align-items: center; 
      font-size: 16px;
      padding: 20px 200px;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(to bottom, #cee8f8, #fff); 
     
  }
  .logo-title{
      font-size: 35px;
      font-weight: 600;
      color: #005d86;
      white-space: nowrap;
  }
  .box{
      position: relative;
      align-items: center;
      border-radius: 30px;
      width: 270px;
      height: 30px;
      background-color: #fff;
      display: flex;
      align-items: center;
  }
  .search{
      height: 30px;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: right;
  
  }
  .search-icon{
      position: absolute;
      right: 3px;
      width: 50px;
      height: 26px;
      border-radius: 26px;
      border: none;
      background-color: #005d86;
  }
  .search .box input{
      height: 26px;
      width: 180px;
      border: none;
      position: absolute;
      right: 50px;
      margin-left: -20px;
  
  }
  .jianc{
      font-size: 18px;
      white-space: nowrap;
      background: linear-gradient(to right, #fa8f77, #f29f25, #1ed1b5, #0a6995);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  .serch-part{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: end;
      position: relative;
  }
  </style>
  